<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑预约单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
	<style type="text/css">
		.layui-form{
			padding: 20px ;
		}
		.layui-form-item {
			width: 33.333%;
			float: left;
			margin-right: 0;
		}

		@media (max-width: 1240px) {
			.layui-form-item .layui-inline {
				width: 100%;
				float: none;
			}
		}
	</style>
</head>
<body class="childrenBody">
		<form class="layui-form layui-form-pane">
		<div class="layui-form-item">
			<label class="layui-form-label">客户</label>
			<div class="layui-input-inline">
				<select name="customerId" lay-verify="required" lay-filter="test" lay-search id="customerId">
				 	<option value="">--请选择客户--</option>
				</select>
			</div>
			 <div class="layui-form-mid layui-word-aux">请根据手机号码或姓名检索</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">预约车辆</label>
			<div class="layui-input-block">
				<select name="customerCarId" lay-verify="required" id="carInfoId">
				 	<option value="">--请选择车辆信息--</option>
				</select> 
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">预约项目</label>
			<div class="layui-input-block">
				<select name="productId" lay-verify="required" id="productId"> 
				 	<option value="">--请选择预约项目--</option>
				</select> 
			</div>
		
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">预约日期</label>
			<div class="layui-input-block">
				<input type="text" id="test1"  class="layui-input" lay-verify="required" name="orderTime" id="orderTime" placeholder="请选择预约日期">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block">
			<!-- ,0预约中,-1取消,1开单,2结算 -->
				<select name="status" lay-verify="required" id="status"> 
				 	<option value="">--请选择状态--</option>
				 	<option value="0">待开单</option>
				 	<option value="1">已开单</option>
				 	<option value="-1">已取消</option>
				</select> 
			</div>
		
		</div>
		<!-- <div class="layui-form-item">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block" style="width: 20%">
				<input type="text" class="layui-input" lay-verify="" name="description" placeholder="请输入产品说明">
			</div>
		</div> -->
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="editSubscribes">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		</div>
	</form>

<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script type="text/javascript">
layui.config({
    base: '/js/admin/'
}).extend({
    ajaxExtention: 'ajaxExtention',//加载自定义扩展，每个业务js都需要加载这个ajax扩展
    $tool: 'tool'
}).use(['form', 'layer', 'tree', 'jquery', 'ajaxExtention', 'laydate','$tool'], function () {
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : parent.layer,
        $ = layui.jquery,
    	laydate = layui.laydate,
        $tool = layui.$tool;
    
	  laydate.render({
		    elem: '#test1', //指定元素
		    min:0,
          type: 'datetime',
		    change: 
		    	function(value, date, endDate){

		    	}
		});
	  var membersList;
	  $.ajax({
          type : "GET",
          url: '/storeMember/getAllStoreMembers',
          dataType:'json',
       	  async:false,
          success: function(data){
          	var list=data.data;
          	var html='';
          	membersList=list;
              for(var i=0;i<list.length;i++){	
                  html += "<option value='"+list[i].id+"'>"+list[i].phone+"   "+list[i].name+"</option>"
              }
              $("#customerId").append(html);
              form.render();
          }
      }); 
	  
	  var categorysList;
	  $.ajax({
          type : "GET",
          url: '/categorys/getAlls',
          dataType:'json',
       	  async:false,
          success: function(data){
        	var cateData=data.data;
        	
        	var html='';
        	for(var i=0;i<cateData.length;i++){	
        		html+='<option disabled="disabled">'+cateData[i].category.name+'</option>';
        		var prosData=cateData[i].products;
        	
        			for(var j=0;j<prosData.length;j++){	
	        			html+='<option value="'+prosData[j].id+'" projectid="'+prosData[j].categoryId+'" price="'+prosData[j].price+'">|--'+prosData[j].name+'</option>';
	        		}
        		
        		
        	}
        	$("#productId").append(html);
        	form.render(); 
          }
      }); 
	  
	  form.on('select(test)', function(data){
		  if(data.value!=''){
			  $.ajax({
                  type : "GET",
                  url: '/storeMemberCar/getCarsByStoreMember/'+data.value,
		          dataType:'json',
		       	  async:false,
		          success: function(data){
		          	var list=data.data;
		          	membersList=list;
		          	var html='<option value="">--请选择车辆信息--</option>';
		              for(var i=0;i<list.length;i++){	
		                  html += "<option value='"+list[i].id+"'>"+list[i].plateNumber+"   "+list[i].carInfo+"</option>"
		              }
		              $("#carInfoId").html(html);
		              form.render();
		          }
		      });
		  }
		  return false;
        	
      }); 
	  
	  
	  function triggerMemberCar(id){
		  $.ajax({
              type : "GET",
              url: '/storeMemberCar/getCarsByStoreMember/'+id,
	          dataType:'json',
	       	  async:false,
	          success: function(data){
	          	var list=data.data;
	          	membersList=list;
	          	var html='';
	              for(var i=0;i<list.length;i++){	
	                  html += "<option value='"+list[i].id+"'>"+list[i].plateNumber+"   "+list[i].carInfo+"</option>"
	              }
	              $("#carInfoId").append(html);
	              form.render();
	          }
	      });
	  }
	  
	  
	  initUserInfo();
	  
	  
     
    /**
     * 初始化用户信息
     * */
     function initUserInfo() {
        var queryArgs = $tool.getQueryParam();//获取查询参数
        var id = queryArgs['id'];
        var url = '/subscribe/getById/'+id;
        $.ajax({
            url:url,
            method:"GET",
            success:function (data) {
                var datas = data.data;
               
               $("#customerId").val(datas.customerId);
               triggerMemberCar(datas.customerId);
               $("select[name='customerCarId'] option[value='"+datas.customerCarId+"']").attr("selected","selected");
               $("select[name='productId'] option[value='"+datas.productId+"']").attr("selected","selected"); 
               $("#status").val(datas.status);
               $("#orderTime").val($tool.formatDate(datas.orderTime));
               var orderTime=$tool.formatDate(datas.orderTime);
               laydate.render({
            	    elem: '#test1'
            	    ,value: orderTime
            	});
                form.render();//重新绘制表单，让修改生效 
            }
        });
       
    }
  
    /**
     * 表单提交
     * */
     form.on("submit(editSubscribes)", function (data) {
         var queryArgs = $tool.getQueryParam();//获取查询参数
         var id = queryArgs['id'];
         var customerId = data.field.customerId;
         var customerCarId = data.field.customerCarId;
         var productId = data.field.productId;
         var orderTime = data.field.orderTime;
         var status = data.field.status;
         //请求
         var url ='/subscribe/update';
         var req = {
             subscribeId:id,
             customerId: customerId,
             customerCarId: customerCarId,
             productId: productId,
             orderTime: orderTime,
             status: status
         };

        $.ajax({
            url: url,
            contentType:"application/json;charset=UTF-8",
            data: JSON.stringify(req),
            method: "PUT",
            success: function (data) {
                if(data.code==2000){
                    layer.msg("预约信息更新成功！", {time: 1000}, function () {
                        layer.closeAll("iframe");
                        //刷新父页面
                        parent.location.reload();
                    });
                }else{
                    layer.msg(data.msg);
                }
            }
           
        });

        return false;
    }) 

});

</script>
</body>
</html>

